<script type="text/javascript" language="javascript">
                function changeImage(img){
                   document.getElementById('bigImage').src=img;
                }
            </script>

<h1 class="h1-margin">لوحة التحكم</h1>
<div id="dashboard-container">
    <div class="dashboard-row">
    	<div class="dashboard-cell"><a href="apartments.php"><img src="images/db-1.png" alt="" width="" height="" onmouseover="changeImage('images/db-1h.png')"/></a></div>
        <div class="dashboard-cell"><a href="furnitures.php"><img src="images/db-2.png" alt="" width="" height="" onmouseover="changeImage('images/db-2h.png')"/></a></div>
        <div class="dashboard-cell"><a href="bookings.php"><img src="images/db-3.png" alt="" width="" height="" onmouseover="changeImage('images/db-3h.png')"/></a></div>
        <div class="dashboard-cell"><a href="customers.php"><img src="images/db-4.png" alt="" width="" height="" onmouseover="changeImage('images/db-4h.png')"/></a></div>
    </div>
    
    <div class="dashboard-row">
    	<div class="dashboard-cell"><a href="addService.php"><img src="images/db-5.png" alt="" width="" height="" onmouseover="changeImage('images/db-5h.png')"/></a></div>
        <div class="dashboard-cell"><a href="vouchers.php"><img src="images/db-6.png" alt="" width="" height="" onmouseover="changeImage('images/db-6h.png')"/></a></div>
        <div class="dashboard-cell"><a href="sms.php"><img src="images/db-7.png" alt="" width="" height="" onmouseover="changeImage('images/db-7h.png')"/></a></div>
        <div class="dashboard-cell"><a href="reports.php"><img src="images/db-8.png" alt="" width="" height="" onmouseover="changeImage('images/db-8h.png')"/></a></div>
    </div>
    <div class="clear"></div>
</div>